<div class="layui-row kt-photo-list" id="kt-user-follow">
</div>


<script>
    layui.use([
        'jquery',
        'flow',
        'laytpl',
        'fun',
    ], function () {
        var $ = layui.jquery;
        var flow = layui.flow;
        var laytpl = layui.laytpl;
        var fun = layui.fun;

        // 动态加载css
        $('<link>').attr({
            type: 'text/css',
            rel: "stylesheet",
            href: '/html/css/user-follow.css'
        }).appendTo("head");

        // 流加载
        flow.load({
            elem: '#kt-user-follow' //流加载容器。
            ,isAuto: false
            ,isLazyimg: true
            ,done: function(page, next){ //加载下一页
                //模拟插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 8; i++){

                        var str = '<div class="layui-col-md3 layui-col-xs6 kt-follow-list">\n' +
                            '        <img style="width:100%;" src="/html/images/headpic.jpg" />\n' +
                            '    </div>';

                        lis.push(str)
                    }
                    next(lis.join(''), page < 8); //假设总页数为 6
                }, 500);
            }
        });

        // 个人中心关注的用户列表点击事件
        $(document).on('mouseup','.kt-photo-list>.kt-follow-list',function(){
            $(this).addClass('active');

            $(this).trigger('animationend');
        });

        // 设置只有鼠标抬起时才会执行的监听事件
        $(document).on('animationend','.kt-photo-list>.kt-follow-list',function(){

            var thisObj = $(this);

            var htmla = '<a href="javascript:;" class="kt-photo-info-show infoShowImg">'+thisObj.html()+'</a>';
            var circularWidth = thisObj.width()+120;

            if( thisObj.hasClass('active') ){

                // 获取模板内容
                fun.getTpl('/html/tpl/user_center/follow-userinfo.tpl', function (html) {

                    // 设置参数
                    var data = {
                        circularWidth: circularWidth
                    };
                    // 渲染模板
                    laytpl(html).render(data, function (html) {

                        layer.open({
                            type: 1,
                            anim: 1,
                            title: false,
                            skin: 'kt-open-photo-info',
                            closeBtn: 0,
                            shadeClose: true,
                            content:htmla+html,
                            end: function(){
                                thisObj.removeClass('active');
                            }
                        });

                        // 设置基本信息自动显示
                        infoShow = setTimeout(function(){
                            $('.kt-photo-info-show').trigger('click');
                        },3000);

                    });
                });

            }
        });

        $(document).on('click','.kt-photo-info-show',function(){

            if(infoShow !== undefined){
                clearInterval(infoShow)
            }

            if($(this).hasClass('infoShowImg')){
                var selfOffsetLeft = $(this).offset().left - 300;
                $(this).offset({left:selfOffsetLeft});

                var siblingsOffsetLeft = $(this).siblings('.circular').offset().left - 300;
                $(this).siblings('.circular').offset({left:siblingsOffsetLeft});

                // 添加个人信息框
                $(this).after('<div class="kt-photo-info-content"></div>');

                // 设置动画已执行的标识
                $(this).removeClass('infoShowImg');
            }

        });

        // 个人中心关注的用户列表移入事件
        $(document).on('mouseenter','.kt-photo-list>.kt-follow-list',function(){
            $(this).addClass('clipMe');
        });
        $(document).on('mouseleave','.kt-photo-list>.kt-follow-list',function(){
            $(this).removeClass('clipMe');
        });

    });
</script>